import React, { Component } from 'react'
import { Card, Tabs, Icon, message } from 'antd'

const TabPane = Tabs.TabPane

class TabPage extends Component {

    handleCallback = (key) => {
        message.info('Hi,您选择的标签页是' + key)
    }

    render() {
        return (
            <div className="tabs-wrap">
                <Card title="基本标签页" className="card-item">
                    <Tabs defaultActiveKey="3">
                        <TabPane tab="Tab 1" key="1">欢迎学习AntD UI框架</TabPane>
                        <TabPane tab="Tab 2" key="2" disabled>欢迎学习AntD UI框架</TabPane>
                        <TabPane tab="Tab 3" key="3">AntD是非常受欢迎的UI框架</TabPane>
                    </Tabs>
                </Card>
                <Card title="带有图标的标签页" className="card-item">
                    <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
                        <TabPane tab={<span><Icon type="plus"/>Tab 1</span>} key="1">欢迎学习AntD UI框架</TabPane>
                        <TabPane tab={<span><Icon type="edit"/>Tab 2</span>} key="2">欢迎学习AntD UI框架</TabPane>
                        <TabPane tab={<span><Icon type="delete"/>Tab 3</span>} key="3">AntD是非常受欢迎的UI框架</TabPane>
                    </Tabs>
                </Card>
                <Card title="卡片式页签" className="card-item">
                
                </Card>
            </div>
        )
    }
}

export default TabPage